<template>
    <div class="game-content">
        <div class="game-banner">
            <img src="../../assets/img/photo.jpg" alt="">
            <div class="game-title">非带链来了</div>
            <div class="game-text">该网页由非带链开发，向其提供以下权限，即可继续操作</div>
        </div>
        <div class="game-terms">
            <i class="check-box"></i>
            <span>获取你的公开信息（昵称）</span>
        </div>
        <div class="game-submit">
            <span class="game-submit-btn">向非带链授权</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'game'
    }
</script>

<style lang="scss">
    .game-content{
        width: 100%;
        height: 100%;
        background: #fff;
        .game-banner{
            width: 100%;
            height: 3.285rem;
            position: relative;
            img{
                width: 100%;
            }
            .game-title{
                width: 100%;
                font-size: 0.56rem;
                color: #fff;
                font-weight: 700;
                position: absolute;
                top: 25%;
                text-align: center;
            }
            .game-text{
                font-size: 0.28rem;
                color: #fff;
                position: absolute;
                top: 50%;
                margin: 0.4rem;
                text-align: center;
            }
        }
        .game-terms{
            height: 0.34rem;
            -webkit-user-select: none;
            text-align: left;
            cursor: pointer;
            margin: 0.2rem 0.3rem;
            position: relative;
            .check-box{
                display: inline-block;
                width: 0.32rem;
                height: 0.32rem;
                vertical-align: bottom;
                margin-bottom: 0.02rem;
                box-sizing: border-box;
                border: 0;
                background: url(../../assets/img/check.png) no-repeat;
                background-size: contain;
                position: absolute;
            }
            span{
                font-size: 12px;
                position: absolute;
                left: 0.4rem;
            }
        }
        .game-submit{
            width: 100%;
            text-align: center;
            margin-top: 1.2rem;
            height: 0.6rem;
            position: relative;
            .game-submit-btn{
                display: inline-block;
                width: 3rem;
                height: 0.6rem;
                line-height: 0.6rem;
                background: #e60816;
                border-radius: 0.3rem;
                font-family: PingFangSC-Medium,serif;
                font-size: 0.28rem;
                color: #fff;
                letter-spacing: 0;
                cursor: pointer;
                position: absolute;
                left: calc(50% - 1.5rem)
            }
        }
    }
</style>
